<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopEase - 简单易用的电商平台</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        'neutral-100': '#F7F8FA',
                        'neutral-200': '#E5E6EB',
                        'neutral-300': '#C9CDD4',
                        'neutral-400': '#86909C',
                        'neutral-500': '#4E5969',
                        'neutral-600': '#272E3B',
                        'neutral-700': '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.3s ease-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
      }
      .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5;
      }
      .btn-secondary {
        @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5;
      }
      .btn-outline {
        @apply bg-white hover:bg-neutral-100 text-primary font-medium py-3 px-6 rounded-lg border border-primary transition-all duration-300;
      }
    }
  </style>
</head>

<body class="font-inter text-neutral-700 bg-white">
    <!-- 顶部通知栏 -->
    <div class="bg-primary text-white text-center py-2 text-sm">
        <p>限时优惠：全场满199元免运费 | 新用户注册送50元优惠券</p>
    </div>

    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4 md:px-6">
            <!-- 上部导航 -->
            <div class="flex items-center justify-between py-4">
                <a href="#" class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-2xl text-primary"></i>
                    <span class="text-xl font-bold text-neutral-700">ShopEase</span>
                </a>

                <!-- 搜索框 -->
                <div class="hidden md:flex items-center bg-neutral-100 rounded-full px-4 py-2 flex-1 max-w-md mx-8">
                    <i class="fa fa-search text-neutral-400 mr-2"></i>
                    <input type="text" placeholder="搜索商品..." class="bg-transparent w-full focus:outline-none text-sm">
                </div>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-6">
                    <!-- 账户按钮及下拉框 -->
                    <div class="relative" id="account-container">
                        <button
                            class="hidden md:flex items-center text-neutral-500 hover:text-primary transition-colors"
                            id="account-button">
                            <i class="fa fa-user-o mr-1"></i> 账户
                        </button>


                    </div>

                    <a href="login.html" class="relative text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-heart-o text-xl"></i>登录
                        <span
                            class="absolute -top-2 -right-2 bg-secondary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
                    </a>
                    <a href="register.html" class="relative text-neutral-500 hover:text-primary transition-colors"
                        id="cart-icon">
                        <i class="fa fa-shopping-cart text-xl"></i>注册
                        <span
                            class="absolute -top-2 -right-2 bg-secondary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">2</span>
                    </a>
                    <button class="md:hidden text-neutral-700" id="mobile-menu-button">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>

            <!-- 下部导航 -->
            <nav class="hidden md:flex items-center justify-between py-3 border-t border-neutral-200">
                <div class="flex items-center space-x-8">
                    <a href="#" class="font-medium text-primary">首页</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">全部商品</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">热销榜单</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">新品上市</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">优惠活动</a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">客户服务</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">关于我们</a>
                </div>
            </nav>

            <!-- 移动端搜索框 -->
            <div class="md:hidden py-3 border-t border-neutral-200">
                <div class="flex items-center bg-neutral-100 rounded-full px-4 py-2">
                    <i class="fa fa-search text-neutral-400 mr-2"></i>
                    <input type="text" placeholder="搜索商品..." class="bg-transparent w-full focus:outline-none text-sm">
                </div>
            </div>
        </div>
    </header>

    <!-- 轮播图 -->
    <section class="bg-neutral-100 py-8">
        <div class="container mx-auto px-4 md:px-6">
            <div class="relative rounded-xl overflow-hidden shadow-lg">
                <img src="https://picsum.photos/seed/banner1/1200/400" alt="夏季大促销" class="w-full h-auto">
                <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent flex items-center">
                    <div class="p-8 md:p-16 max-w-xl">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-4">夏季大促销</h2>
                        <p class="text-white/80 mb-8">限时折扣高达50%，精选夏季商品，快来选购！</p>
                        <a href="#" class="btn-secondary inline-flex items-center">
                            立即抢购 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 商品分类 -->
    <section class="py-12">
        <div class="container mx-auto px-4 md:px-6">
            <h2 class="text-2xl font-bold text-neutral-700 mb-8 text-center">商品分类</h2>

            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 md:gap-6">
                <!-- 分类项 1 -->
                <a href="#" class="bg-white rounded-xl shadow-md p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-laptop text-2xl text-primary"></i>
                    </div>
                    <h3 class="font-medium">电子产品</h3>
                </a>

                <!-- 分类项 2 -->
                <a href="#" class="bg-white rounded-xl shadow-md p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-tshirt text-2xl text-primary"></i>
                    </div>
                    <h3 class="font-medium">服装鞋帽</h3>
                </a>

                <!-- 分类项 3 -->
                <a href="#" class="bg-white rounded-xl shadow-md p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-home text-2xl text-primary"></i>
                    </div>
                    <h3 class="font-medium">家居用品</h3>
                </a>

                <!-- 分类项 4 -->
                <a href="#" class="bg-white rounded-xl shadow-md p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-book text-2xl text-primary"></i>
                    </div>
                    <h3 class="font-medium">图书音像</h3>
                </a>

                <!-- 分类项 5 -->
                <a href="#" class="bg-white rounded-xl shadow-md p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-gamepad text-2xl text-primary"></i>
                    </div>
                    <h3 class="font-medium">游戏娱乐</h3>
                </a>

                <!-- 分类项 6 -->
                <a href="#" class="bg-white rounded-xl shadow-md p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-gift text-2xl text-primary"></i>
                    </div>
                    <h3 class="font-medium">礼品专区</h3>
                </a>
            </div>
        </div>
    </section>

    <!-- 商品列表 -->
    <section class="py-12 bg-neutral-100">
        <div class="container mx-auto px-4 md:px-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
                <h2 class="text-2xl font-bold text-neutral-700 mb-4 md:mb-0">热门商品</h2>
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <select
                            class="bg-white border border-neutral-200 rounded-lg py-2 pl-4 pr-10 appearance-none focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option>默认排序</option>
                            <option>价格从低到高</option>
                            <option>价格从高到低</option>
                            <option>销量优先</option>
                            <option>评分优先</option>
                        </select>
                        <i
                            class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none"></i>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button
                            class="w-8 h-8 bg-white border border-neutral-200 rounded flex items-center justify-center text-neutral-500 hover:text-primary">
                            <i class="fa fa-th-large"></i>
                        </button>
                        <button
                            class="w-8 h-8 bg-white border border-neutral-200 rounded flex items-center justify-center text-neutral-500 hover:text-primary">
                            <i class="fa fa-list"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 商品卡片 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.2iXCN4uHIFX6Zibg6zagWQHaE8?w=277&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                            alt="无线蓝牙耳机" class="w-full h-64 object-cover">
                        <span
                            class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-2 py-1 rounded">热销</span>
                        <button
                            class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-neutral-500 hover:text-danger transition-colors">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-400 ml-1">(128)</span>
                        </div>
                        <h3 class="font-medium mb-2">无线蓝牙耳机 高清降噪 超长续航</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-secondary font-bold text-lg">¥299</span>
                                <span class="text-neutral-400 line-through text-sm ml-2">¥399</span>
                            </div>
                            <span class="text-xs text-neutral-500 bg-neutral-100 px-2 py-1 rounded">已售 3.2k</span>
                        </div>
                        <button class="w-full btn-primary py-2 flex items-center justify-center">
                            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                        </button>
                    </div>
                </div>

                <!-- 商品卡片 2-8 保持不变 -->
                <!-- 商品卡片 2-->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.nUM8IWVmofmnD3JdgY-MOQHaGd?w=242&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                            alt="蛋糕" class="w-full h-64 object-cover">
                        <span
                            class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-2 py-1 rounded">热销</span>
                        <button
                            class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-neutral-500 hover:text-danger transition-colors">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-400 ml-1">(128)</span>
                        </div>
                        <h3 class="font-medium mb-2">清新草莓， 沁人心脾</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-secondary font-bold text-lg">¥100</span>
                                <span class="text-neutral-400 line-through text-sm ml-2">¥190</span>
                            </div>
                            <span class="text-xs text-neutral-500 bg-neutral-100 px-2 py-1 rounded">已售 3.2k</span>
                        </div>
                        <button class="w-full btn-primary py-2 flex items-center justify-center">
                            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                        </button>
                    </div>
                </div>
                <!-- 商品卡片 3 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.72nMCb-A263ZplAyKkvIOgHaE7?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                            alt="护肤品" class="w-full h-64 object-cover">
                        <span
                            class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-2 py-1 rounded">热销</span>
                        <button
                            class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-neutral-500 hover:text-danger transition-colors">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-400 ml-1">(128)</span>
                        </div>
                        <h3 class="font-medium mb-2">美白护肤，清凉倍爽</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-secondary font-bold text-lg">¥299</span>
                                <span class="text-neutral-400 line-through text-sm ml-2">¥399</span>
                            </div>
                            <span class="text-xs text-neutral-500 bg-neutral-100 px-2 py-1 rounded">已售 3.2k</span>
                        </div>
                        <button class="w-full btn-primary py-2 flex items-center justify-center">
                            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                        </button>
                    </div>
                </div>
                <!-- 商品卡片 4 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="relative">
                        <img src= "./image/towel.png"
                            alt="毛巾" class="w-full h-64 object-cover">
                        <span
                            class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-2 py-1 rounded">热销</span>
                        <button
                            class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-neutral-500 hover:text-danger transition-colors">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-400 ml-1">(128)</span>
                        </div>
                        <h3 class="font-medium mb-2">无线蓝牙耳机 高清降噪 超长续航</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-secondary font-bold text-lg">¥299</span>
                                <span class="text-neutral-400 line-through text-sm ml-2">¥399</span>
                            </div>
                            <span class="text-xs text-neutral-500 bg-neutral-100 px-2 py-1 rounded">已售 3.2k</span>
                        </div>
                        <button class="w-full btn-primary py-2 flex items-center justify-center">
                            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                        </button>
                    </div>
                </div>
                <!-- 商品卡片 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.-qJWls6DGBwHhRuHNv43bgHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3https://ts2.tc.mm.bing.net/th/id/OIP-C.-qJWls6DGBwHhRuHNv43bgHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3"
                            alt="无线蓝牙耳机" class="w-full h-64 object-cover">
                        <span
                            class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-2 py-1 rounded">热销</span>
                        <button
                            class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-neutral-500 hover:text-danger transition-colors">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-400 ml-1">(128)</span>
                        </div>
                        <h3 class="font-medium mb-2">无线蓝牙耳机 高清降噪 超长续航</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-secondary font-bold text-lg">¥299</span>
                                <span class="text-neutral-400 line-through text-sm ml-2">¥399</span>
                            </div>
                            <span class="text-xs text-neutral-500 bg-neutral-100 px-2 py-1 rounded">已售 3.2k</span>
                        </div>
                        <button class="w-full btn-primary py-2 flex items-center justify-center">
                            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                        </button>
                    </div>
                </div>

                <!-- 商品卡片 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.2iXCN4uHIFX6Zibg6zagWQHaE8?w=277&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                            alt="无线蓝牙耳机" class="w-full h-64 object-cover">
                        <span
                            class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-2 py-1 rounded">热销</span>
                        <button
                            class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-neutral-500 hover:text-danger transition-colors">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-400 ml-1">(128)</span>
                        </div>
                        <h3 class="font-medium mb-2">无线蓝牙耳机 高清降噪 超长续航</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-secondary font-bold text-lg">¥299</span>
                                <span class="text-neutral-400 line-through text-sm ml-2">¥399</span>
                            </div>
                            <span class="text-xs text-neutral-500 bg-neutral-100 px-2 py-1 rounded">已售 3.2k</span>
                        </div>
                        <button class="w-full btn-primary py-2 flex items-center justify-center">
                            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                        </button>
                    </div>
                </div>
                <!-- 商品卡片 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.2iXCN4uHIFX6Zibg6zagWQHaE8?w=277&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="无线蓝牙耳机"
                            class="w-full h-64 object-cover">
                        <span
                            class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-2 py-1 rounded">热销</span>
                        <button
                            class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-neutral-500 hover:text-danger transition-colors">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-400 ml-1">(128)</span>
                        </div>
                        <h3 class="font-medium mb-2">无线蓝牙耳机 高清降噪 超长续航</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-secondary font-bold text-lg">¥299</span>
                                <span class="text-neutral-400 line-through text-sm ml-2">¥399</span>
                            </div>
                            <span class="text-xs text-neutral-500 bg-neutral-100 px-2 py-1 rounded">已售 3.2k</span>
                        </div>
                        <button class="w-full btn-primary py-2 flex items-center justify-center">
                            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                        </button>
                    </div>
                </div>
                <!-- 商品卡片 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.2iXCN4uHIFX6Zibg6zagWQHaE8?w=277&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="无线蓝牙耳机"
                            class="w-full h-64 object-cover">
                        <span
                            class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-2 py-1 rounded">热销</span>
                        <button
                            class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-neutral-500 hover:text-danger transition-colors">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-400 ml-1">(128)</span>
                        </div>
                        <h3 class="font-medium mb-2">无线蓝牙耳机 高清降噪 超长续航</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-secondary font-bold text-lg">¥299</span>
                                <span class="text-neutral-400 line-through text-sm ml-2">¥399</span>
                            </div>
                            <span class="text-xs text-neutral-500 bg-neutral-100 px-2 py-1 rounded">已售 3.2k</span>
                        </div>
                        <button class="w-full btn-primary py-2 flex items-center justify-center">
                            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                        </button>
                    </div>
                </div>
                